<template>
  <view class="overtrue">
    <view
      class="content"
      :style="{
        transform: `translateY(${safeTop + 'px'})`,
        height: safeHeight + 'px',
      }"
    >
      <view
        class="menu"
        :style="{
          height: menuButtonHeight + 'px',
        }"
      >
      <view class="router-title" :style="{height:(capsuleHeight-2*capsuleHeight/100)+'px',width:capsuleHeight+'px',right:(capsuleLeft+margin/2)+'px',top:menuButtonTop+'px' ,border: `${capsuleHeight/100}px solid rgba(218,218,218,0.9)`}" @tap="back"></view>
      </view>
      <view class="body" :style="{height:(safeHeight-menuButtonHeight)+'px'}">
        <view :style="{width:(safeWidth-(margin*2))+'px',margin:margin+'px'}">
          <view class="title" :style="{marginLeft:margin+'px',marginBottom:margin/3+'px'}">数 据</view>
          <view class="storage" :style="{padding:margin*2+'px'}" >
            <view class="storage-content">
              <view class="storage-content-btn-box">
                <button v-if="dataText===''" class="storage-content-btn1" size="mini" @tap="exportData">导出</button>
                <button v-if="dataText!==''" class="storage-content-btn3" size="mini" @tap="copy">复制</button>
                <button v-if="dataText!==''" class="storage-content-btn4" size="mini" @tap="empty">清空</button>
                <button class="storage-content-btn2" size="mini" @tap="importData">导入</button>
              </view>
              <textarea
                v-model="dataText"
                class="storage-content-cin"
                auto-height
                :maxlength="-1"
                placeholder="数据文本将显示于此"
              />
            </view>
          </view>
        </view>
        <view :style="{width:(safeWidth-(margin*2))+'px',margin:margin+'px'}">
          <view class="title" :style="{marginLeft:margin+'px',marginBottom:margin/3+'px'}">额 度</view>
          <view class="storage" :style="{padding:margin*2+'px'}" >
            <view class="storage-content">
              <view class="storage-content-limit">
                <view class="limit-item">
                  <view>当日额度</view>
                  <input class="picker" :value="dayLimit"  @confirm="OverInputDayLimit"/>
                </view>
                <view class="limit-item-content">
                  <view>当月每日默认额度</view>
                  <input class="picker"  :value="monthLimit"  @confirm="OverInputMonthLimit"/>
                </view>
                <view class="limit-item">
                  <view>每日默认额度</view>
                  <input class="picker" :value="yearLimit" @confirm="OverInputYearLimit"/>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {  ref } from 'vue';
import { onShow, onHide, onLoad } from '@dcloudio/uni-app';
import { useBillStore } from '@/stores/bill';
import type { todayType } from '@/types/bill';

////变量区
let safeTop = ref<number>(0);
let safeHeight = ref<number>(0);
let safeWidth = ref<number>(0);
let menuButtonHeight = ref<number>(0);
const menuButtonTop=ref<number>(0)
const margin=ref<number>(0)
const dataText=ref<string>('')//数据
const billStore = useBillStore();
const expData=ref<string>('')
const capsuleHeight=ref<number>(0)// 胶囊按钮的高度
const capsuleLeft=ref<number>(0)//胶囊按钮的左边界x坐标
const capsuleTop=ref<number>(0)//胶囊按钮的顶点y坐标
const dayLimit=ref<number>(0)// 当日额度
const monthLimit=ref<number>(0)// 当月每日默认额度
const yearLimit=ref<number>(0)// 每日默认额度
let today = ref<todayType>({
  year: 0,
  month: 0,
  day: 0,
  paymentList: [],
});
////函数区
onLoad((option) => {
  console.log('set Load');
  Init(option);
});
onShow(() => {
  console.log('set Show');
});
onHide(() => {
  console.log('set Hide');
  back()
});


function back(){
  uni.navigateBack()
}
// 导出数据
function exportData(){
  let data={
    bill:billStore.GetBill(),
    option:billStore.GetOption()
  }
  dataText.value=JSON.stringify(data)
  expData.value=JSON.stringify(data)
  // 将数据复制到剪贴板
  uni.setClipboardData({
    data: dataText.value,
  });
}
// 导入数据
function importData(){
  let importedData = JSON.parse(dataText.value);
  billStore.SetBill(importedData.bill);
  billStore.SetOption(importedData.option);
  empty()
  GetData(today.value.year,today.value.month,today.value.day)
  uni.showToast({
    title: '数据已更新',
    duration: 1000
  });
}

function  OverInputDayLimit(value: { target: { value: never; }; }){
  billStore.dayLimit(today.value.year,today.value.month,today.value.day,Number(value.target.value))
  uni.showToast({
    title: '当日额度已更新',
  duration: 1000
  });
}
function  OverInputMonthLimit(value: { target: { value: never; }; }){
  billStore.monthLimit(today.value.year,today.value.month,today.value.day,Number(value.target.value))
  uni.showToast({
    title: '当月未来每日额度已更新',
    duration: 1000
  });
}
function  OverInputYearLimit(value: { target: { value: never; }; }){
  billStore.yearLimit(today.value.year,today.value.month,today.value.day,Number(value.target.value))
  uni.showToast({
    title: '未来每日额度已更新',
    duration: 1000
  });
}


// 复制
function copy(){
  uni.setClipboardData({
    data: dataText.value,
  });
}
// 清空
function empty(){
  dataText.value=''
  expData.value=''
}
//初始化
function Init(option: AnyObject) {
  GetWindowsSafe();
  GetCapsule();
  GetData(Number(option.year),Number(option.month),Number(option.day))
}
// 获取数据
function GetData(year:number,month:number,day:number){
  today.value = billStore.GetDayData(year, month, day);
  dayLimit.value=today.value.dayData.limit
  monthLimit.value=today.value.monthData.dayLimit
  yearLimit.value=billStore.GetOption().dayQuota
}
//获取安全区域
function GetWindowsSafe() {
  let safe = uni.getSystemInfoSync().safeArea;
  safeTop.value = safe!.top;
  safeHeight.value = safe!.height;
  safeWidth.value = safe!.width;
}
//获取胶囊区域
function GetCapsule() {
  let systemInfo = uni.getSystemInfoSync();
  let safe = systemInfo.safeArea;
  let menuButtoninfo = uni.getMenuButtonBoundingClientRect();
  menuButtonTop.value = menuButtoninfo.top - safe!.top;
  menuButtonHeight.value =
    safe!.width*0.05/2 + menuButtoninfo.height+(menuButtoninfo.top-safe!.top)
  margin.value=safe!.width*0.05/2
  capsuleHeight.value=menuButtoninfo.height
  capsuleLeft.value=safe!.width-menuButtoninfo.left
  capsuleTop.value=menuButtoninfo.top-safe!.top
}
</script>

<style scoped>
.overtrue {
  width: 750rpx;
  height: 100vh;
  background: rgb(247, 247, 247);
}

.content {
  width: 750rpx;
  background: rgb(247, 247, 247);
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  position: relative;
  transition: all ease 0.5s;
  display: flex;
}

.menu {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
}
.router-title{
  position: absolute;
  background-color: rgb(254,254,254);
  border-radius: 50%;
  background-image: url('../../static/back.png');
  background-size: cover;
  background-size: 55% 55%; /* 设置背景图片的具体宽度和高度 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 背景图片居中显示 */
  cursor: pointer;
}
.body{
  overflow: auto;
  width: 100%;
}
.storage{
  background-color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
}
.storage-content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.storage-content-limit{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 25rpx;
  color: rgb(27, 27, 28);
  margin-block: 1%;
}
.limit-item{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.picker{
  width: 10%;
  height: 100%;
  border-radius: 15rpx;
  border: 1rpx solid rgba(218,218,218,0.9);
  padding-inline: 4%;
  cursor: pointer;
  text-align: center;
}
.limit-item-content{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-block: 3%;
}
.storage-content-btn-box{
  width: 100%;
  display: flex;
  justify-content:space-between;
}
.storage-content-btn1{
  width: 50%;
}
.storage-content-btn3{
  width: 25%;
}
.storage-content-btn4{
  width: 25%;
  margin-left: 2%;
}
.storage-content-btn2{
  width: 50%;
  margin-left: 2%;
}
.storage-content-cin{
  width: 97.5%;
  margin-top: 2%;
  font-size: 20rpx;
  border: 1px solid rgba(218,218,218,0.9);
  padding-left: 2%;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
  border-radius: 3px;
}
.title{
  width: 100%;
  color: rgb(133,133,138);
  font-size: 22rpx;
}
</style>
